<template>
  <v-app :theme="theme">
    <v-main app>
      <v-navigation-drawer app v-model="drawer" fixed width="320">
        <template #prepend>
          <div class="flex justify-between h-[40px] px-4 items-center">
            <div></div>
            <v-btn @click="drawer = false" elevation="0" icon> 关闭 </v-btn>
          </div>
        </template>
        <JingWen @select="handleJingWenSelect"></JingWen>
      </v-navigation-drawer>
      <v-app-bar elevation="4" v-model:value="appBarShow">
        <template #prepend>
          <v-app-bar-nav-icon @click="$router.back()">
            <j-icon size="20">MdiArrowLeft</j-icon>
          </v-app-bar-nav-icon>
        </template>
        <v-app-bar-title>
          <div class="text-xl">{{ title }}</div>
        </v-app-bar-title>
        <v-spacer></v-spacer>
        <v-switch
          :label="theme === 'defaultCustomDarkTheme' ? '夜间' : '白天'"
          class="mt-6 mr-4"
          :model-value="theme"
          @update:model-value="handleThemChange"
          true-value="defaultCustomDarkTheme"
          false-value="defaultCustomTheme"
        ></v-switch>
      </v-app-bar>
      <div>
        <div v-if="!loading && code === 200" @click.stop="!drawer && (appBarShow = !appBarShow)">
          <div class="jw-conainer">
            <div class="jw-header">
              <div class="title">
                <div class="text-subtitle text-sm font-extrabold">长按经文可选中经文进行复制</div>
              </div>
              <div class="type">
                <div>{{ selectJwText }}</div>
              </div>
            </div>
            <div class="jw-content">
              <HammerList ref="jwItemRef" v-model="selectIndexs" :items="contents"></HammerList>
              <div v-if="boomotToolShow" class="h-[88px] w-full"></div>
            </div>
          </div>
        </div>
        <div v-if="code === 500 && !loading">
          <div class="text-center" style="margin-top: 160px">没有查询到经文</div>
        </div>
        <div v-if="loading">
          <v-progress-linear indeterminate color="blue"></v-progress-linear>
          <!-- 加载中loading -->
          <div class="text-center" style="margin-top: 160px">加载中...</div>
        </div>
      </div>
      <TextBoomotTool :show="boomotToolShow" :copyText="copyText" @clear="clear"></TextBoomotTool>
      <v-bottom-navigation app>
        <v-btn @click="handlePre" :disabled="total == -1">
          <span class="text-subtitle">上一章</span>
        </v-btn>
        <v-btn :disabled="total == -1">
          <span class="text-subtitle">共{{ total }}章当前{{ zhang }}章</span>
        </v-btn>
        <v-btn @click="handleNext" :disabled="total == -1">
          <span class="text-subtitle">下一章</span>
        </v-btn>
        <v-btn @click="drawer = true">
          <j-icon color="rgb(var(--v-subtitle))" size="32">目录</j-icon>
          <span class="text-subtitle">目录</span>
        </v-btn>
      </v-bottom-navigation>
    </v-main>
  </v-app>
</template>

<script setup name="JingWengRes">
import { ref } from "vue";
import storage from "store";
const theme = ref(storage.get("jw-theme") || "defaultCustomDarkTheme");

function handleThemChange(val) {
  theme.value = val;
  storage.set("jw-theme", val);
}
</script>

<script>
import JingWen from "./JingWen.vue";
import { getJingWen } from "@/api/jingwen";
import HammerList from "@/components/Hammer/hammer-list.vue";
import TextBoomotTool from "@/components/TextBoomotTool/TextBoomotTool.vue";

export default {
  name: "JingWengRes",
  components: {
    HammerList,
    TextBoomotTool,
    JingWen,
  },
  data() {
    return {
      jingwen: {},
      loading: false,
      code: 0,
      hammers: [],
      selectIndexs: [],
      drawer: false,
      appBarShow: true,
      bottomNavValue: "recent",
    };
  },
  computed: {
    contents() {
      return this.jingwen.data || [];
    },
    zhang() {
      if (this.contents.length === 0) {
        return "";
      }
      return this.contents[0].zhang;
    },
    id() {
      return this.$route.query.id;
    },
    total() {
      if (this.$route.query.total == void 0) return -1;
      return this.$route.query.total;
    },
    currentIndex() {
      return this.$route.query.currentIndex;
    },
    title() {
      return this.$route.query.title;
    },

    boomotToolShow() {
      return this.selectIndexs.length > 0 && !this.loading;
    },
    copyText() {
      return this.contents
        .filter((item, index) => this.selectIndexs.includes(index))
        .sort((a, b) => a.jie - b.jie)
        .map((item) => `${item.data}(${this.title}${item.zhang}:${item.jie})`)
        .join("\n");
    },
    selectJwText() {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      return this.selectIndexs
        .sort((a, b) => a - b)
        .map((item) => item + 1)
        .join(",");
    },
    query() {
      return (t) => ({
        id: this.title + (+this.zhang + t),
        title: this.title,
        total: this.total,
        // currentIndex: 0,
      });
    },
  },
  created() {
    this.init();
  },
  activated() {
    this.init();
  },
  mounted() {
    if (!this.id) {
      this.handleNoIdSearch();
    }
  },
  beforeUnmount() {},
  methods: {
    async init() {
      this.loading = true;
      try {
        if (!this.id) {
          this.handleNoIdSearch();
          return;
        }
        const res = await getJingWen(this.$route.query.id);
        this.jingwen = res;
        this.code = res.code;
        this.handleScrollByIndex();
      } catch (error) {
        console.log(error);
      } finally {
        this.loading = false;
      }
    },
    handleJingWenSelect(query) {
      this.drawer = false;
      this.$router.replace({
        query,
      });
    },
    handleScrollByIndex() {
      this.currentIndex !== void 0
        ? setTimeout(() => {
            this.$refs.jwItemRef.scrollToIndex(this.currentIndex);
            this.selectIndexs = [+this.currentIndex];
          }, 10)
        : setTimeout(() => (this.selectIndexs = []), 10);
    },
    handlePre() {
      if (+this.zhang === 1) {
        return;
      }
      this.$router.replace({
        query: this.query(-1),
      });
    },
    handleNext() {
      if (+this.zhang === +this.total) {
        return;
      }
      this.$router.replace({
        query: this.query(1),
      });
    },
    handleNoIdSearch() {
      this.$router.replace({
        query: {
          id: "创1",
          title: "创世纪",
          total: 50,
        },
      });
      this.drawer = true;
    },
    clear() {
      this.selectIndexs = [];
    },
  },
  watch: {
    id() {
      this.init();
    },
    currentIndex() {
      this.handleScrollByIndex();
    },
  },
};
</script>
<style scoped lang="scss">
.jw-conainer {
  position: relative;
  user-select: none;

  .jw-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 10px;
    position: sticky;
    top: 0;
    width: 100%;

    .title {
      font-size: 20px;
      font-weight: bold;
    }

    .type {
      font-size: 16px;
      color: #666;
    }
  }

  .jw-content {
    padding: 10px;
    line-height: 62px;
    font-size: 26px;

    .jw-item {
      user-select: none;

      .jw-item-jie {
        user-select: none;

        &.active {
          position: relative;
          display: inline-block;
          width: 30px;
          height: 30px;
          // border: 1px solid red;
          border-radius: 100%;
          line-height: 30px;
          text-align: center;
          animation: bordertr 4s;
          animation-iteration-count: 1;
        }
      }
    }
  }
}

@keyframes bordertr {
  0% {
    border: 2px solid red;
  }

  100% {
    border: none;
  }
}
</style>
